<template>
    <div class="menuContainer">
        <template v-for="(item,index) in menuList ">
            <el-dropdown placement="bottom" :key="index">
                <div class="dropdownItem">
                    <span :class="item.picClass"></span>
                    <span class="secondTitle">{{item.title}}</span>
                </div>
                <el-dropdown-menu class="subMenu" slot="dropdown">
                    <el-dropdown-item :divided="false" v-for="(menu,i) in item.childs" :key="i">
                        <div class="subMenuItem">
                            <span></span>
                            <a @click="menuAction(menu.method)">{{menu.menu}}</a>
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
    </div>
</template>
<script>
    import  dataTree from "../dataTree"
    import  videoProjection from "../video/videoProjection"

        import  clusterComponents from "../cluster/clusterComponents"
             import  pointselectS from "../pointselect/pointselect"

               import  trackLine from "../trackLine/trackLine"


             
    export default {
        name: "menuSys",
        data() {
            return {
                menuList: [
                    {
                        title: "监控管理",
                        picClass: "dataMange",
                        childs: [
                            {menu: "图层树", method: "dataManage"},
                            { menu: "视频投放", method: "videoOn" },
                           { menu: "聚合", method: "ClusterPoint" }
                           ,
                           { menu: "控制图层显示", method: "CheckCamrePoint" }
                           ,
                               
                           { menu: "轨迹回放", method: "trackLinePoint" }
                        ],
                    },
                ],
            };
        },
        components: {},
        computed: {},
        methods: {
            menuAction(method) {
                this[method](); //动态调用方法
            },
            popUp(option) {
                var oriObj = new Object();
                oriObj.location = new Object();
                oriObj.location.top = "5rem";
                oriObj.location.right = "2rem";
                oriObj.show = true;
                oriObj.area = new Object();
                oriObj.area.height = "660px";
                oriObj.area.width = "900px";
                oriObj.shade = false;
                oriObj.multiple = true;
                oriObj.data = new Object();
                var newOption = Object.assign(oriObj, option);
                this.$bus.$emit("dialog", newOption);
            },
            //图层树
            dataManage() {
                var option={};
                option.title = "图层管理";
                option.area = new Object();
                option.area.height = "720px";
                option.area.width = "360px";
                option.content = dataTree;
                this.popUp(option);
            },
            videoOn(){
                var option={};
                option.title = "视频投放";
                option.area = new Object();
                option.area.height = "700px";
                option.area.width = "540px";
                option.content = videoProjection;
                this.popUp(option);
            },

            ClusterPoint(){
                     var option={};
                option.title = "聚合";
                option.area = new Object();
                option.area.height = "200px";
                option.area.width = "300px";
                 option.content = clusterComponents;
                 this.popUp(option);

            }
            ,

            CheckCamrePoint(){
                     var option={};
                option.title = "图层控制";
                option.area = new Object();
                option.area.height = "200px";
                option.area.width = "300px";
                 option.content = pointselectS;
                 this.popUp(option);

            },
             trackLinePoint(){
            var option={};
                option.title = "轨迹回放";
                option.area = new Object();
                option.area.height = "200px";
                option.area.width = "300px";
                 option.content = trackLine;
                 this.popUp(option);

            }
            
            
        }
    };
</script>

<style lang="scss">
    .dropdownItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 76px;
    }

    .subMenu {
        background: url(../../assets/menuAndDialog/下拉列表背景.png) no-repeat;
        background-size: 100% 100%;
        border: none;

        .el-dropdown-menu__item {
            color: #fff;
        }

        .el-dropdown-menu__item:not(.is-disabled):hover,
        .el-dropdown-menu__item:focus {
            background-color: transparent;
            color: #46a6ff;
        }

        .subMenuItem {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            border-bottom: 1px solid;

            span {
                font-size: 2rem;
                background-color: #08f4bc;
                width: 5px;
                height: 5px;
                margin-right: 8px;
                border-radius: 4px;
            }
        }
    }

    .menuContainer {
        height: 3.6rem;
        /*width: 20rem;*/
        display: flex;
        justify-content: space-around;
        background: url(../../assets/工具栏背景.png) no-repeat;
        background-size: 100% 100%;
        align-items: center;
        padding: 2px 4px;

        .dataShow {
            background: url(../../assets/数据显示.png) no-repeat;
            background-size: 100% 100%;
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
        }

        .dataMange {
            background: url(../../assets/数据管理.png) no-repeat;
            background-size: 100% 100%;
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
        }

        .personMange {
            background: url(../../assets/人员管理.png) no-repeat;
            background-size: 100% 100%;
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
        }

        .rehearse {
            background: url(../../assets/演练.png) no-repeat;
            background-size: 100% 100%;
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
        }

        .MeasureOf3D {
            background: url(../../assets/测量.png) no-repeat;
            background-size: 100% 100%;
            width: 1.6rem;
            height: 1.6rem;
            display: inline-block;
        }

        .secondTitle {
            display: inline-block;
            color: #f06429;;
            font-size: 1rem;
            font-weight: bold;
        }
    }
</style>
